﻿
XXXX.monitor = {
	map : null,
    //loadMap: false,
	draw : function(url){
		if(!XXXX.monitor.map) {
			Ext.MessageBox.alert("操作失败", "地图未加载！");
			return ;
		}
		
		console.log(url);
		
		Ext.Ajax.request({
			method: 'GET',
			url : url,
			success : function(action, request) {
				console.log(action.responseText);
				var obj = Ext.decode(action.responseText);
				var data = obj.data;
				XXXX.monitor.drawPoints(data);
			},
			failure : function(action, request) {
				console.log(action.responseText);
				var obj = Ext.decode(action.responseText);
				Ext.MessageBox.alert("获取位置数据失败", obj.message);
			}
		});
	},
	
	drawPoints : function(data){
		if(!data || data.length < 1){
			Ext.MessageBox.alert("操作失败", "返回位置数据为空！");
			return ;
		}
		var start_icon = new BMap.Icon('img/start.png', new BMap.Size(25, 25), {  
			anchor: new BMap.Size(10, 30)  
			});
		var end_icon = new BMap.Icon('img/end.png',     new BMap.Size(25, 25), {  
			anchor: new BMap.Size(10, 30)  
			});
		
		XXXX.monitor.map.clearOverlays();
		
		// 画标注点
		var pts = [];
		for(var i=0;i<data.length;i++){
			var pos = data[i];
			var pt = new BMap.Point(pos.x,pos.y);
			pts.push(pt);
			var marker;
			if(i==0)
				marker = new BMap.Marker(pt,{icon:start_icon});
			else if(i==data.length-1)
				marker = new BMap.Marker(pt,{icon:end_icon});
			else
				marker = new BMap.Marker(pt);
			
			marker.addEventListener("click", function(e){    
				Ext.MessageBox.alert("标注","您点击了标注 " + e.point.lat + "," + e.point.lng);    
				});  
			XXXX.monitor.map.addOverlay(marker);
		}
		
		// 画连线
		for(var i=0;i<pts.length-1;i++){
			var polyline = new BMap.Polyline([ pts[i], pts[i+1]],  
			                                {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5}  
			                               );  
			XXXX.monitor.map.addOverlay(polyline);  
		}
	}, 
	init : function() {
        if(!!XXXX.monitor.map) XXXX.monitor.map=null; // release memory

		var tab = Ext.getCmp('tabView');
		
		console.log(tab.getInnerHeight());
		console.log(tab.getInnerWidth());
		
		// 1. yd store
		var yd_store = new Ext.data.Store(
				{
					method: 'GET',
					url: extjsbase.rnd('./js/yundan/yundan.json'),
					reader : new Ext.data.JsonReader( {
						totalProperty : 'totalCount',
						root : 'data'
					}, [ {
						name : 'id'
					}, {
						name : 'name'
					}, {
						name : 'company'
					}, {
						name : 'from'
					}, {
						name : 'to'
					}, {
						name : 'carrier'
					}, {
						name : 'date'
					}, {
						name : 'status'
					}, {
						name : 'phone'
					}])
				});
		yd_store.load( {
			params : {
				start : 0,
				limit : 20
			}
		});
		// 2. pts store
		var pts_store = new Ext.data.Store(
				{
					method: 'GET',
					reader : new Ext.data.JsonReader( {
						totalProperty : 'totalCount',
						root : 'data'
					}, [ {
						name : 'x'
					}, {
						name : 'y'
					}])
				});
		
		var panel = new Ext.Panel( {
			renderTo : 'form_monitor',
			id : 'map_monitor',
			layout: 'border',
			height : tab.getInnerHeight(),
			width : tab.getInnerWidth(),
			defaults: {
		        collapsible: true, 
		        //bodyStyle: 'padding:5px',
				split: true
		    },
		    items:[  
				{
					title: "地图展示",
					region:"south",  
					height:tab.getInnerHeight()/2+100,  
					html: '<div id="allmap" style="overflow:auto;width:100%;height:100%"></div>'
				},  
				{
					title: "运单列表",
					id: 'yd_list',
					region:"center",  
					xtype: "grid",
					store: yd_store,
				    colModel: new Ext.grid.ColumnModel({
				        columns: [
				            {header: '运单ID', width: 20, sortable: true, dataIndex: 'id'},
				            {header: '运单名称', dataIndex: 'name'},
				            {header: '承运人', dataIndex: 'carrier'},
				            {header: '公司', dataIndex: 'company'},
				            {header: '从发地', dataIndex: 'from'},
				            {header: '目的地', dataIndex: 'to'},
				            {header: '状态', dataIndex: 'status'},
				            {header: '日期', width: 135, dataIndex: 'date',xtype: 'datecolumn', format: 'Y-m-d'}
				        ]
				    }),
				    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
				    frame: true,
				    listeners: {
		                 cellclick : function( grid, rowIndex, columnIndex, e ){
		                	var rec = grid.getStore().getAt(rowIndex);
		                	var d = rec.get("id");

		                	var pts_grid = Ext.getCmp("yd_points");
		                	
		                	if(!pts_grid.store.proxy)
		                		pts_grid.store.proxy = new Ext.data.HttpProxy( {
		                			method: 'GET',
			                		url : extjsbase.rnd('./js/yundan/monitor'+d+".json")
			                		});
		                	else{
		                		pts_grid.store.proxy.conn.url = (extjsbase.rnd('./js/yundan/monitor'+d+".json"));
		                		pts_grid.store.proxy.conn.method = 'GET';
		                	}
		                	pts_grid.store.load( {
		                		params : {
		                		start : 0,
		                		limit : 100
		                		}
		                		});
		                	
		                	XXXX.monitor.draw(extjsbase.rnd('./js/yundan/monitor'+d+".json"));
		                 }
		         }
				},
				{
					title: "位置列表",
					id: 'yd_points',
					region:"east",  
					width: 250,
					//width:tab.getInnerWidth()/2,
					xtype: "grid",
					store: pts_store,
				    colModel: new Ext.grid.ColumnModel({
				        columns: [
				            {header: '经度', dataIndex: 'x'},
				            {header: '纬度', dataIndex: 'y'}
				        ]
				    }),
				    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
				    frame: true
				}
			]  
		    
		});

        if(!XXXX.loadMap) {
            var script = document.createElement("script");
            script.src = "http://api.map.baidu.com/api?v=2.0&ak=WFVCR2Q3f7k9xRrlRqEjIKGy&callback=initMap";
            document.body.appendChild(script);
            XXXX.loadMap = true;
        }else{
            initMap();
        }
	}
}

function initMap(){

    var bmap = new BMap.Map("allmap");
    XXXX.monitor.map = bmap;
    var point = new BMap.Point(116.404, 39.915);
    bmap.centerAndZoom(point,12);
    bmap.enableScrollWheelZoom();

	bmap.addEventListener("click", function(e){
		 var msg = e.point.lng + ", " + e.point.lat;
		 Ext.MessageBox.alert("坐标", msg);
		});
	
	
	var driving = new BMap.DrivingRoute(bmap, {  
	 renderOptions: {  
	   map: bmap,  
	   autoViewport: true  
	 }  
	});  
	driving.search(new BMap.Point(116.329701, 39.982983), new BMap.Point(116.403578, 39.914837));

}

System.register("monitor", XXXX.monitor);